<template>
  <div>
    <v-header/>
    <div class="content">
      <div class="top">
        <span>提升呼叫接通率40%以上，企业营销的必备神器</span>
      </div>
      <div class="telegram">
        <div class="tele-con">
          <h4 class="tele-title">什么是来电秀</h4>
          <p class="tele-desc">简单的来说来电秀通过语音服务呼叫用户手机，可以让被呼叫用户在通话前即可知晓贵公司身份。帮助用户从错综复杂的通讯环境中，识别有效信息与来电，防止真正有价值有需求的信息被错误漏接，打消降低用户对通讯环境的不满。从而帮助一些真正有价值，有好的服务、产品的企业能真正的利用好通讯，将企业好的价值准确传递给消费者，让“价值”不再因冰冷的拦截软件与未知的猜疑被拒之门外。</p>
          <ul class="tele-list">
            <li v-for="(item,index) in items" :key="index">
              <div class="t-left"><img :src=item.imgUrl :alt=item.title></div>
              <div class="t-right">
                <h5>{{item.title}}</h5>
                <p>{{item.desc}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="future">
        <div class="ft-left"><img src="./images/callshow1.png" ></div>
        <div class="ft-right">
          <h4>未使用来电秀服务</h4>
          <p>企业拨打用户电话，客户看到的画面是这样的...</p>
        </div>
      </div>
      <div class="employ">
        <div class="em-left">
          <h4>使用来电秀服务</h4>
          <p>企业拨打用户电话，接听前可知晓来电人员身份，能够有效减少用户不信任默认电话而挂机的情况。</p>
        </div>
        <div class="em-right"><img src="./images/callshow2.png" ></div>
      </div>
      <div class="explain">
        <h6>什么是来电秀</h6>
        <div class="ex-content">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="被呼叫的手机不是电信的是否可以呢?" name="1" class="ex-title">
              <div>可以。"来电秀"是中国电信推出的产品，但无论是电信、移动还是联通，都可以使用并可达到预期效果。</div>
            </el-collapse-item>
            <el-collapse-item title="客户手机装有360安全卫士，会影响效果么？" name="2">
              <div>不会。"来电秀"与360卫士、腾讯管家已达成合作，避免在呼叫过程中被其过滤。</div>
            </el-collapse-item>
            <el-collapse-item title="建议场景使用?" name="3">
              <div>高价值用户：针对大客户的各种电话服务，增加来"来电秀"功能后，能够有效地提升品牌形象，强化客户品牌感知，提高品牌曝光度，为企业直接或间接带来价值。 
增值类、营销类业务推广：不管是对已有客户还是新客户的业务推广，在被挂机的来电中，有很大一部分是因为不信任电话来源而挂机的。而高价值客户一般都比较忙碌，骚扰电话也多，更容易拒绝不信任来源电话，所以被挂机的电话可能隐藏着更高的价值。</div>
            </el-collapse-item>
            <el-collapse-item title="使用来电秀的成本是怎样的？" name="4">
              <div>相对于企业获得的收益来说，"来电秀"是非常便宜的。具体价格会根据使用量浮动，请联系我们的售前服务人员可以致电、或加微信咨询。</div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="case">
        <h4>成功案例</h4>
        <div class="case-list">
          <img :src=item.url :alt=item.title v-for="(item,index) in imgUrl" :key="index" />
        </div>
      </div>
    </div>
    <v-contact/>
    <v-footer/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeName:'',
      items:[
        {imgUrl:require('./images/enhance.png'),title:'提高呼叫接通率',desc:'客户接听前即可知晓来电人员身份，能够有效减少用户不信任未知电话而挂机的情况。'},
        {imgUrl:require('./images/remind.png'),title:'未接来电智能提示',desc:'用户来电通过弹窗信息告知来电人员身份，能够提高用户漏接来电的回电率，提高下次来电的接通率'},
        {imgUrl:require('./images/inform.png'),title:'通知类短信到达率100%',desc:'通过来电秀（短信）服务发送的短信内容直接以“霸屏”弹窗的形式展现在客户手机上，客户必须阅读后才可关闭弹窗。'},
        {imgUrl:require('./images/unite.png'),title:'三大运营商联合出品',desc:'中国电信、移动、联通三网通用。点对点发送，具有高稳定性、高可靠性。'},
      ],
      imgUrl:[
        {url:require('./images/bank-china.png'),title:'中国银行'},
        {url:require('./images/acadsac.png'),title:'阿卡索外教网'},
        {url:require('./images/ctrip.png'),title:'携程'},
        {url:require('./images/bank-pingan.png'),title:'中国平安'},
        {url:require('./images/shifubang.png'),title:'师傅邦'},
        {url:require('./images/eleme.png'),title:'饿了么'},
        {url:require('./images/vanke.png'),title:'万科'},
        {url:require('./images/jinshanwei.png'),title:'上海金山卫计委'},
        {url:require('./images/flexible.png'),title:'圆通快递'},
        {url:require('./images/sgm.png'),title:'上海通用汽车'},
      ]
    }
  }
}
</script>
<style scoped>
.content{
  min-height:2600px;
  background: #fff; 
}
.top{
  width: 100%;
  height: 400px;
  background: url('./images/callshowhome.jpg') center/cover no-repeat
}
.top span{
  line-height: 400px;
  font-size: 24px;
  font-weight: 600;
  color: #fff
}
.telegram{
  width: 100%;
  height: 560px;
  box-sizing: content-box
}
.tele-con{
  width: 1100px;
  margin: 0 auto;
}
.tele-con .tele-title{
  font-size: 24px;
  color: #3E4D60;
  padding: 40px 0 30px;
  margin: 0
}
.tele-con .tele-desc{
  font-size: 16px;
  color: #333333;
  line-height: 25px;
  text-align: left;
}
.tele-list{
  width: 100%;
  list-style: none;
  margin: 0;
  display: table;
  padding: 0;
}
.tele-list li{
  width: 40%;
  float: left;
  margin-top: 40px;
}
.tele-list li:nth-child(2n+1){
  float: right;
}
.tele-list li .t-left{
  width: 40px;
  float: left;
  height: 100px;
  margin-right: 20px;
}
.tele-list li .t-left img{
  display: inline-block;
  
  vertical-align: middle;
}
.tele-list li .t-right{
  text-align: left
}
.tele-list li .t-right h5{
  font-weight: 600;
  margin: 0;
  padding: 0;
  font-size: 20px;
  color: #3DD18F;
}
.tele-list li .t-right p{
  font-size: 14px;
  color: #333333;
  margin-top: 15px;
  line-height: 25px;
}
.future{
  width: 100%;
  height: 480px;
  background: #3E4750;
}
.future .ft-left{
  width: 40%;
  float: left;
  
}
.future .ft-left img{
  width: 300px;
  height: 543px;
  margin-top: 80px;
  float: right;
}
.future .ft-right{
  width: 55%;
  text-align: left;
  float: right;
  color: #fff;
  margin-top:200px
}
.future .ft-right h4{
  font-weight: 600;
  font-size: 32px;
  color: #3DD18F;
  margin: 10px 0;
}
.future .ft-right p{
  color: #fff;
  font-size: 18px;
}
.employ{
  width: 100%;
  margin-top: 150px;
  height: 600px;
}
.employ .em-left{
  float: left;
  width: 55%;
  text-align: right;
  margin-top:200px;
  
}
.employ .em-left h4{
  font-weight: 600;
  font-size: 32px;
  color: #3DD18F;
  margin: 10px 0;
}
.employ .em-left p{
  width: 60%;
  float: right;
  text-align: right;
  color: #333;
  font-size: 16px;
}
.employ .em-right{
  width: 40%;
  float: right;
}
.employ .em-right img{
  width: 300px;
  height: 543px;
  float: left;
}
.explain{
  width: 100%;
  padding: 50px 0;
  background: rgba(14,24,37,0.80);
}
.explain h6{
  font-size: 24px;
  color: #FFFFFF;
  margin: 0 auto;
  text-align: center;
}
.ex-content{
  width: 1100px;
  margin: 60px auto 0;
  display: table;
}
.el-collapse-item{
  width: 490px;
  float: left;
  padding: 0 20px;
  margin-right: 40px;
  margin-bottom: 40px;
  background: #fff;
}
.el-collapse{
  border: none;
}
.el-collapse-item:nth-child(2n){
  margin-right:0;
}
.el-collapse-item .el-collapse-item__header.is-active {
    border-bottom:1px solid red !important;
}
.el-collapse-item__content div{
  padding-top: 10px;
  text-align: left;
}
.case{
  height: 400px;
  box-sizing: content-box;
}
.case h4{
  margin: 0 auto;
  font-weight: 600;
  text-align: center;
  font-size: 24px;
  color: #3E4D60;
  padding: 40px 0 30px;
}
.case .case-list{
  width: 1000px;
  margin: 0 auto
}
.case .case-list img{
  width: 135px;
  height: 101px;
  margin-bottom: 20px;
  display: inline-block;
  margin-right: 50px;
}
.case .case-list img:nth-child(5n){
  margin-right: 0;
}
</style>
  